<template>
  <div class="unitInfo-tableContainer">
    <div class="unitInfo-tableTitle">
      <h2>临安区公共机构能源消耗申报汇总表</h2>
      <span>
        (填报年份：
        <el-date-picker v-model="yearText" type="year" value-format="yyyy" placeholder="选择年" style="width:100px;" @change="onSearch">
        </el-date-picker>) 【
        <el-checkbox v-model="checked" @change="getDepartmentNames()">汇总至一级单位</el-checkbox>
        &nbsp;&nbsp;&nbsp;&nbsp;填报单位：
        <el-select v-model="searchKey" placeholder="所有单位" size='mini' @change="onSearch">
          <el-option v-for="item in departmentData" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </span>
      <p>【 说明：如勾选汇总至一级单位，则选择某个具体单位时，基础数据含下属2级单位数据，反之则不包含 】</p>
    </div>
    <div class="unitInfo-tableContent">
      <div class="table-titles">
        <span>填报年份：{{yearText}}</span>
        <span>填报单位：{{searchKey}}</span>
      </div>
      <table width="210%" border="1" cellpadding="10">
        <tr>
          <td width="60"></td>
          <td align="center" valign="middle" colspan="3">电消耗</td>
          <td align="center" valign="middle" colspan="3">水消耗</td>
          <td align="center" valign="middle" colspan="3">汽油消耗</td>
          <td align="center" valign="middle" colspan="3">柴油消耗</td>
          <td align="center" valign="middle" colspan="3">燃气消耗</td>
          <td align="center" valign="middle" colspan="3">燃煤消耗</td>
          <td align="center" valign="middle" colspan="3">充电桩消耗</td>
          <td align="center" valign="middle" colspan="3">可再生能源消耗</td>
          <td align="center" valign="middle" colspan="3">其他能源消耗</td>
          <td align="center" valign="middle" colspan="5">用车消耗</td>
        </tr>
        <tr>
          <td align="center" valign="middle">月份</td>
          <td width="100" align="center" valign="middle">量(千瓦时)</td>
          <td width="100" align="center" valign="middle">单位面积电耗</td>
          <td width="100" align="center" valign="middle">费用(元)</td>
          <td width="100" align="center" valign="middle">量(吨)</td>
          <td width="100" align="center" valign="middle">人均用量</td>
          <td width="100" align="center" valign="middle">费用(元)</td>
          <td width="100" align="center" valign="middle">量(升)</td>
          <td width="100" align="center" valign="middle">人均用量</td>
          <td width="100" align="center" valign="middle">费用(元)</td>
          <td width="100" align="center" valign="middle">量(升)</td>
          <td width="100" align="center" valign="middle">人均用量</td>
          <td width="100" align="center" valign="middle">费用(元)</td>
          <td width="100" align="center" valign="middle">量(立方米)</td>
          <td width="100" align="center" valign="middle">人均用量</td>
          <td width="100" align="center" valign="middle">费用(元)</td>
          <td width="100" align="center" valign="middle">量(吨)</td>
          <td width="100" align="center" valign="middle">人均用量</td>
          <td width="100" align="center" valign="middle">费用(元)</td>
          <td width="100" align="center" valign="middle">量(个)</td>
          <td width="100" align="center" valign="middle">人均数量</td>
          <td width="100" align="center" valign="middle">费用(元)</td>
          <td width="100" align="center" valign="middle">量</td>
          <td width="100" align="center" valign="middle">人均用量</td>
          <td width="100" align="center" valign="middle">费用(元)</td>
          <td width="100" align="center" valign="middle">量</td>
          <td width="100" align="center" valign="middle">人均用量</td>
          <td width="100" align="center" valign="middle">费用(元)</td>
          <td width="100" align="center" valign="middle">公里数(千米)</td>
          <td width="100" align="center" valign="middle">量(升)</td>
          <td width="100" align="center" valign="middle">人均用量</td>
          <td width="100" align="center" valign="middle">百公里油耗(升)</td>
          <td width="100" align="center" valign="middle">金额(元)</td>
        </tr>
        <tr :key="i" v-for="(item,i) in energyData">
          <td align="center" valign="middle">{{i+1}}</td>
          <td align="center" valign="middle">{{item.ElectricityTotal||0}}</td>
          <td align="center" valign="middle">{{calculate(item.ElectricityTotal,item.TotalArea)||0}}</td>
          <td align="center" valign="middle">{{item.ElectricityAmount||0}}</td>
          <td align="center" valign="middle">{{item.WaterTotal||0}}</td>
          <td align="center" valign="middle">{{calculate(item.WaterTotal,item.PeopleTotal)||0}}</td>
          <td align="center" valign="middle">{{item.WaterAmount||0}}</td>
          <td align="center" valign="middle">{{item.GasolineTotal||0}}</td>
          <td align="center" valign="middle">{{calculate(item.GasolineTotal,item.PeopleTotal)||0}}</td>
          <td align="center" valign="middle">{{item.GasolineAmount||0}}</td>
          <td align="center" valign="middle">{{item.DieselTotal||0}}</td>
          <td align="center" valign="middle">{{calculate(item.DieselTotal,item.PeopleTotal)||0}}</td>
          <td align="center" valign="middle">{{item.DieselAmount||0}}</td>
          <td align="center" valign="middle">{{item.GasTotal||0}}</td>
          <td align="center" valign="middle">{{calculate(item.GasTotal,item.PeopleTotal)||0}}</td>
          <td align="center" valign="middle">{{item.GasAmount||0}}</td>
          <td align="center" valign="middle">{{item.CoalTotal||0}}</td>
          <td align="center" valign="middle">{{calculate(item.CoalTotal,item.PeopleTotal)||0}}</td>
          <td align="center" valign="middle">{{item.CoalAmount||0}}</td>
          <td align="center" valign="middle">{{item.ChargingPileTotal||0}}</td>
          <td align="center" valign="middle">{{calculate(item.ChargingPileTotal,item.PeopleTotal)||0}}</td>
          <td align="center" valign="middle">{{item.ChargingPileAmount||0}}</td>
          <td align="center" valign="middle">{{item.RenewableTotal||0}}</td>
          <td align="center" valign="middle">{{calculate(item.RenewableTotal,item.PeopleTotal)||0}}</td>
          <td align="center" valign="middle">{{item.RenewableAmount||0}}</td>
          <td align="center" valign="middle">{{item.OtherTotal||0}}</td>
          <td align="center" valign="middle">{{calculate(item.OtherTotal,item.PeopleTotal)||0}}</td>
          <td align="center" valign="middle">{{item.OtherAmount||0}}</td>
          <td align="center" valign="middle">{{item.CarKilometres||0}}</td>
          <td align="center" valign="middle">{{item.CarFuelConsumption||0}}</td>
          <td align="center" valign="middle">{{calculate(item.CarFuelConsumption,item.PeopleTotal)||0}}</td>
          <td align="center" valign="middle">{{themyOil(item.CarFuelConsumption,item.CarKilometres)||0}}</td>
          <td align="center" valign="middle">{{item.CarAmount||0}}</td>
        </tr>
        <tr>
          <td align="center" valign="middle">合计</td>
          <td align="center" valign="middle">{{getTotal('ElectricityTotal')}}</td>
          <td align="center" valign="middle">{{getAverage('ElectricityTotal')}}</td>
          <td align="center" valign="middle">{{getTotal('ElectricityAmount')}}</td>
          <td align="center" valign="middle">{{getTotal('WaterTotal')}}</td>
          <td align="center" valign="middle">{{getAverage('WaterTotal')}}</td>
          <td align="center" valign="middle">{{getTotal('WaterAmount')}}</td>
          <td align="center" valign="middle">{{getTotal('GasolineTotal')}}</td>
          <td align="center" valign="middle">{{getAverage('GasolineTotal')}}</td>
          <td align="center" valign="middle">{{getTotal('GasolineAmount')}}</td>
          <td align="center" valign="middle">{{getTotal('DieselTotal')}}</td>
          <td align="center" valign="middle">{{getAverage('DieselTotal')}}</td>
          <td align="center" valign="middle">{{getTotal('DieselAmount')}}</td>
          <td align="center" valign="middle">{{getTotal('GasTotal')}}</td>
          <td align="center" valign="middle">{{getAverage('GasTotal')}}</td>
          <td align="center" valign="middle">{{getTotal('GasAmount')}}</td>
          <td align="center" valign="middle">{{getTotal('CoalTotal')}}</td>
          <td align="center" valign="middle">{{getAverage('CoalTotal')}}</td>
          <td align="center" valign="middle">{{getTotal('CoalAmount')}}</td>
          <td align="center" valign="middle">{{getTotal('ChargingPileTotal')}}</td>
          <td align="center" valign="middle">{{getAverage('ChargingPileTotal')}}</td>
          <td align="center" valign="middle">{{getTotal('ChargingPileAmount')}}</td>
          <td align="center" valign="middle">{{getTotal('RenewableTotal')}}</td>
          <td align="center" valign="middle">{{getAverage('RenewableTotal')}}</td>
          <td align="center" valign="middle">{{getTotal('RenewableAmount')}}</td>
          <td align="center" valign="middle">{{getTotal('OtherTotal')}}</td>
          <td align="center" valign="middle">{{getAverage('OtherTotal')}}</td>
          <td align="center" valign="middle">{{getTotal('OtherAmount')}}</td>
          <td align="center" valign="middle">{{getTotal('CarKilometres')}}</td>
          <td align="center" valign="middle">{{getTotal('CarFuelConsumption')}}</td>
          <td align="center" valign="middle">{{getAverage('CarFuelConsumption')}}</td>
          <td align="center" valign="middle">{{getAverageThemy()}}</td>
          <td align="center" valign="middle">{{getTotal('CarAmount')}}</td>
        </tr>
      </table>
      <div class="table-button">
        <a class="downLoad" :href="exportUrl">导出</a>
        <!--<el-button size="mini">打印</el-button>-->
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        yearText: new Date().getFullYear() + '',
        isGetting: true,
        searchKey: '所有单位',
        checked: false,
        departmentData: ['所有单位'],
        energyData: [],
        exportUrl: '',
      }
    },
    methods: {
      async getDetail() {
        this.isGetting = false;
        this.energyData = []
        const department = this.searchKey == '所有单位' ? '' : this.searchKey
        const result = await this.$get("/api/InstituionEnergy/statistics", {
          year: this.yearText,
          departmentName: department,
          includeChild: this.checked
        })
        console.log(result, '能源')
        if (result.length > 0) {
          this.resultArray = result
          this.energyData = result
          this.isGetting = true
        }
      },
      themyOil(total, num) {
        if (this.isGetting) {
          if (total && num) return ((total / num) * 100).toFixed(2)
          return 0
        }
      },
      calculate(total, num) {
        if (this.isGetting) {
          if (total && num) return (total / num).toFixed(2)
          return 0
        }
      },
      getAverageThemy() {
        var totalOil = 0;
        var totalKm = 0;
        if (this.isGetting) {
          if (this.energyData.length > 1) {
            this.energyData.map((i) => {
              totalOil += i.CarFuelConsumption
              totalKm += i.CarKilometres
            })
            if (totalOil && totalKm) {
              return ((totalOil / totalKm) * 100).toFixed(2)
            } else {
              return 0;
            }
          }
        }
      },
      getAverage(str) {
        var result = 0;
        if (this.isGetting) {
          if (this.energyData.length > 1) {
            this.energyData.map((i) => {
              result += i[str]
            })
            if (this.energyData[0].PeopleTotal && this.energyData[0].TotalArea) {
              if (str == 'ElectricityTotal') {
                return (result / this.energyData[0].TotalArea).toFixed(2)
              } else {
                return (result / this.energyData[0].PeopleTotal).toFixed(2)
              }
            } else {
              return 0
            }
          }
        }
      },
      getTotal(str) {
        var result = 0;
        if (this.isGetting) {
          if (this.energyData.length > 1) {
            this.energyData.map((i) => {
              result += i[str]
            })
            return result
          }
        }
      },
      onSearch() {
        const department = this.searchKey == '所有单位' ? '' : this.searchKey
        this.exportUrl = `${this.baseUrl}/api/InstituionEnergy/statistics?year=${this.yearText}&departmentName=${department}&includeChild=${this.checked}&export=true`
        this.getDetail()
      },
      // 获取所有单位列表或者一级单位
      async getDepartmentNames() {
        this.departmentData = ['所有单位']
        this.exportUrl = `${this.baseUrl}/api/InstituionEnergy/statistics?year=${this.yearText}&departmentName=&includeChild=${this.checked}&export=true`
        var result
        if (this.checked) {
          result = await this.$get('/api/User/getParents')
        } else {
          result = await this.$get('/api/User/getDepartmentNames')
        }
        var obj = JSON.parse(localStorage.getItem('userInfo'))
        if (obj.role == '2') {
          this.searchKey = result[0]
          this.departmentData = result;
        } else {
          this.departmentData = this.departmentData.concat(result)
        }
        this.getDetail()
      }
    },
    created() {
      this.showHome.isShow = false;
      console.log(this.exportUrl)
      this.getDepartmentNames();
    }
  }

</script>
<style lang="scss" scoped>
  .unitInfo-tableContainer {
    width: 100%;
    padding: 20px 15px;
  }

  .unitInfo-tableTitle {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 25px;
    h2 {
      font-size: 16px;
      margin-bottom: 10px;
    }
    span {
      font-size: 16px;
      font-weight: bold;
    }
    p {
      font-size: 16px;
      margin-top: 5px;
      font-weight: bold;
    }
  }

  .unitInfo-tableInfo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 25px;
    color: #606266;
  }

  .unitInfo-tableContent {
    width: 100%;
    overflow: auto;
    .table-titles {
      margin-bottom: 15px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      span {
        margin-right: 200px;
      }
    }
    table {
      color: #606266;
      border: 1px solid #ebeef5;
      td {
        padding: 6px 0px;
      }
      tr.table-row {
        height: 45px;
      }
    }
  }

  .table-footers {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    .tableFooter-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 25px;
      .tableFooter-col {
        flex: 1;
      }
    }
  }

  .table-button {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  a.downLoad {
    display: inline-block;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 18px;
    color: #1E88C7;
    text-indent: 0;
    font-size: 14px;
    line-height: 20px;
    margin-left: 20px;
  }
</style>